<template>
  <div class="blog-slider">
    <div class="blog-slider_wrp swiper-wrapper">

      <!--  登陆界面    -->
      <div class="blog-slider_item swiper-slide" >
        <div class="blog-slider_img">
          <img src="../../public/cat.jpg" alt="">
        </div>
        <div class="blog-slider_content">
          <span class="blog-slider_code">十小时前还在游泳的八戒鸭</span>
          <div class="blog-slider_title">Welcome to DLM</div>
          <el-form ref="form" :model="login" >
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">账号：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="login.DownLoadUser" maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">密码：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="login.DownLoadPassword" show-password maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <a href="#" class="blog-slider_button" style="float: right;margin-right: 10px">Cancel</a>
          <a href="#" class="blog-slider_button" style="float: right;margin-right: 50px">DownLoad</a>
        </div>
      </div>

      <!--  注册界面    -->
      <div class="blog-slider_item swiper-slide">
        <div class="blog-slider_img">
          <img src="../../public/tortoise.jpg" alt="">
        </div>
        <div class="blog-slider_content">
          <span class="blog-slider_code">十小时前还在游泳的八戒鸭</span>
          <div class="blog-slider_title">Welcome to DLM</div>
          <el-form ref="form" :model="register" >
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">账号：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="register.RegisterUser" maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">密码：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="register.RegisterPassword" show-password maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="6">
                <span class="blog-slider_code" style="font-size: 18px;line-height: 40px">确认密码：</span>
              </el-col>
              <el-col :span="18">
                <el-input prefix-icon="el-icon-lock" placeholder="请再次输入密码" v-model="register.RegisterPasswordAgain" maxlength="10" style="overflow: hidden"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <a href="#" class="blog-slider_button" style="float: right;margin-right: 10px">Cancel</a>
          <a href="#" class="blog-slider_button" style="float: right; margin-right: 50px">CONFIRM</a>
        </div>
      </div>

    </div>
    <div class="blog-slider_pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  name: "Login",
  data() {
    return {
      login: {
        DownLoadUser: "",
        DownLoadPassword: "",
      },
      register: {
        RegisterUser:"",
        RegisterPassword:"",
        RegisterPasswordAgain:"",
      },
      msg:'hello'
    }
  },
  mounted() {
    new Swiper('.blog-slider', {
      spaceBetween: 30,
      effect: 'fade',
      mousewheel: {
        invert: false,
      },

      pagination: {
        el: '.blog-slider_pagination',
        clickable: true,
      }
    });
  }
}
</script>

<style scoped>
@import url('../assets/Login.css');
.blog-slider {
  margin-top: 100px;
}
.el-col {
  margin: 0;
  padding: 0;
  height: 30px;
}
</style>